<!DOCTYPE html>
<html ng-controller="jieshaoController">
	<head>
		<meta charset="UTF-8">
		<title>小红书，最大的全球购物社区，带你发现全世界的好东西</title>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		  *{
			padding: 0;
			margin: 0;
		    }
			body{
				height: 100%;
			}
			body{
				overflow: hidden;/*隐藏超出的部分*/
			}
			.box{
				position: absolute;
				top: 0%;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.box-ul{
				height: 100%;
				list-style:none;
			}
			.box-ul li{
				position: relative;
				width: 100%;
				height: 520px;
				text-align: center;
			}
			.box li.page1{background-color: #F05368;}
			.box li.page2{background-color: #5fc2bd; position: relative;}
			.box li.page3{background-color: #fbbc53;}
			.box li.page4{background-color: #67da9f;}
			.box li.page5{background-color: #fff;}
			.box li.page6{background-color: #f05368;}
			.yuandian{
				display: inline-block;
				position: absolute;
				top: 50%;
				right:35px;
				width:30px;
				height: 130px;
				z-index: 101;
				transform: translateY(-50%);
			}
			.yuandian span{
				display: block;
				margin-top: 16px;
				width: 15px;
				height: 15px;
				border: 1px solid white;
				border-radius:10px ;
			}
			.yuandian .current{
				width: 17px;
				height: 17px;
				background-color: white;
				margin-left: -1px;
			}
			/*以上为框架的布局*/
			
		</style>
	</head>
	<body>
		<div class="box main">
			<ul class="box-ul">
				<li class="page1 out">
					<div class="cont-download">
						<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/sitename.png?s=None"/>
						<p>最大的全球购物社区</p>
						<a href="" id="down">立即下载</a>
					</div>
					<div class="cont-phone">
						<div class="banner">
							<ul class="banner-in">
								<li>
									<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/phone/1.png?s=None">
								</li>
								<li>
									<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/phone/2.png?s=None">
								</li>
								<li>
									<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/phone/3.png?s=None">
								</li>
								<li>
									<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/phone/4.png?s=None">
								</li>
								<li>
									<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/phone/5.png?s=None">
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="page2 out">
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/bag.png?s=None" alt="" />
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/tower.png?s=None" alt="" />
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/cloth.png?s=None" alt="" />
					<div class="page2-right">
						<h1>世间好物  陪你逛遍<h1>
						<p>小红书购物笔记</p>
						<p>网罗全球大牌折扣及私家分享</p>
					</div>
				</li>
				<li class="page3 out">
					<div class="page3-left">
						<h1>世间好物  陪你逛遍<h1>
						<p>小红书购物笔记</p>
						<p>网罗全球大牌折扣及私家分享</p>
					</div>
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/note.png?s=None"/>
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/camera.png?s=None"/>
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/glass.png?s=None"/>
					
				</li>
				<li class="page4 out">
					<img src="//s4.xiaohongshu.com/static/img/v2/web/index/house.png?s=None" alt="" />
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/balloon.png?s=None" alt="" />
					<img src="http://s4.xiaohongshu.com/static/img/v2/web/index/cloud.png?s=None" alt="" />
					<div class="page4-right">
						<h1>世间好物  陪你逛遍<h1>
						<p>小红书购物笔记</p>
						<p>网罗全球大牌折扣及私家分享</p>
					</div>
				</li>
				<li class="page5" id="xiazai">
					<div class="download" style="margin: 0;">
				    	<h1>立即下载小红书</h1>
				    	<a href="http://www.xiaohongshu.com/redirect/app_hk" class="download-cont">
				    		<img src="http://s4.xiaohongshu.com/static/img/v2/web/common/apple2.png?s=1471971752" alt="" />
				    		<span>iOS</span>
				    	</a>
				    	<a href="http://o3.xiaohongshu.com/d/xhs_v2.7.0.apk" class="download-cont">   			
				    		<img src="http://s4.xiaohongshu.com/static/img/v2/web/common/android2.png?s=1471971752" alt="" />
				    		<span>Android</span>
				    	</a>
				    	<a href="" class="download-cont">
				    		<img src="http://s4.xiaohongshu.com/static/img/v2/web/common/qr-code-2016.jpg?s=1471971752" alt="" />
				    	</a>
				    </div>
				</li>
				<li class="page6 out">
					<h1>更多海外目的地购物攻略，尽在小红书</h1>
					<div class="page6-img">
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/0.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/1.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/2.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/3.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/4.png?s=None" alt="" />
						</a>
					</div>
					<div class="page6-img">
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/5.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/6.png?s=None" alt="" />
						</a>
						<a href="#/destination">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/7.png?s=None" alt="" />
						</a>
						<a href="#/destination#Germany">
							<img src="//s4.xiaohongshu.com/static/img/v2/web/index/destination/8.png?s=None" alt="" />
						</a>
					</div>
				</li>
			</ul>
			
		</div>
		<div class="yuandian">
				<span class="current"></span>
				<span ></span>
				<span ></span>
				<span ></span>
				<span ></span>
				<span ></span>
			</div>
		<script type="text/javascript">
			var nowPage=0;
			var lock=true;//用于截流，不然滚一下滚轮就滚到底
			$(".box ul li").eq(nowPage).removeClass('out').siblings().addClass('out') 
			$(document).mousewheel(function(e,d){
				if(lock=true){
				nowPage-=d;
				if(nowPage<0){nowPage=0};
				if(nowPage>6){nowPage=6};
				$(".box").animate({
					"top":nowPage*-100+"%"
				},600)
				lock=false;
				}
				
				setTimeout(function(){
					lock=true;
				},1200) 
				$(".current span").eq(nowPage).removeClass("current")
				.siblings().addClass("current");
			
				
			});
			$(".yuandian span").click(function(){//点击圆点跳转事件
				nowPage=$(this).index();
				$(".box").animate({"top":nowPage*-520},1000)
				$(".yuandian span").eq(nowPage).addClass("current")
				.siblings().removeClass("current");
			 if(nowPage==4){
			 	$(".yuandian span").css("border-color","#F05368");
			 	$(this).css("background-color","#F05368")
			 }else{
			 	$(".yuandian span").css("border-color","white");
			 	$(".yuandian span").eq(4).css("background-color","")
			 }
				$(".box ul li").eq(nowPage).removeClass('out').siblings().addClass('out') 
			});
			
			 
//			轮播代码
    var nowImg=0;
    var lis=$(".banner-in li");
    var $bannerIn=$(".banner-in");
    $(".banner-in li:first").clone().appendTo(".banner-in");
    function donghua(){
        $bannerIn.animate({
            "left":nowImg*(-237)
        },700)
    }

    function lunbo(){
        if(!$bannerIn.is(":animated")){
            if(nowImg<lis.length-1){
                nowImg++;
                donghua();
            }else{
                nowImg=0;
                $bannerIn.animate({"left":lis.length*(-237)},700,function(){
                    $bannerIn.css("left",0);
                })
            }
        }
    }
    //自动轮播
    t=setInterval(lunbo,2000)
    $(".banner").mouseenter(function() {
        clearInterval(t);
    });
    $(".banner").mouseleave(function() {
        clearInterval(t);
        t=setInterval(lunbo,2000)
    });//轮播代码结束
  //点击立即下载跳转到下载部分
  $("#down").click(function(){
  	$("body").animate({scrollTop: $("#xiazai").offset().top-120},1000);
  })
    //点击a标签跳到目的地页面的相应内容
    var $page6a = $(".page6 a");
	</script>
	</body>
</html>
